<template>
	<view class="main">
		<view class="list" v-if="state==false">
			<view class="border a">
				<view class="left">
					姓名
					</view>
				<view class="right">
					<input v-model="name" type="text" value="" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="border a">
				<view class="left">
					账号
				</view>
				<view class="right">
					<input v-model="account" type="text" value="" placeholder="请输入账号" />
				</view>
			</view>
		</view>
		<view class="btn" @tap="getUser" v-if="state==false">
			提交
		</view>
		<view class="list" v-if="state==true">
			<view class="border a">
				<view class="left">
					姓名
					</view>
				<view class="right">
					<input v-model="names" type="text" value="" placeholder="请输入姓名" disabled/>
				</view>
			</view>
			<view class="border a">
				<view class="left">
					账号
				</view>
				<view class="right">
					<input v-model="accounts" type="text" value="" placeholder="请输入账号" disabled/>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
		changeAlipay,
		user
	} from '@/api/index.js'
	export default {
		data() {
			return {
				account:'',
				name:'',
				accounts:'',
				names:'',
				state:false
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			async getUser(){
				let res = await changeAlipay({
					account:this.account,
					name:this.name
				})
				if (res.code == 1) {
					uni.showToast({
						title:'提交成功',
						icon:'none'
					})
					setTimeout(()=>{
						this.getInfo()
					},1000)
				}else{
					uni.showToast({
						title:'提交失败',
						icon:'none'
					})
				}
			},
			async getInfo(){
				let qres = await user()
				if (qres.data.alipay_info != '') {
					console.log(qres)
					this.state = true
					this.accounts = qres.data.alipay_info.account
					this.names = qres.data.alipay_info.name
					console.log(this.state);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #f6f6f6;
		padding: 100rpx 30rpx;
		color: #000;
		.list{
			.border{
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #ddd;
				margin-bottom: 30rpx;
			}
			.a{
				display: flex;
				align-items: center;
				.left{
					width: 25%;
					// font-size: 24rpx;
				}
				.right{
					flex: 1;
					// font-size: 24rpx;
				}
			}
			.b{
				display: flex;
				align-items: center;
				.left{
					width: 25%;
					font-size: 24rpx;
				}
				.right{
					width: 75%;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					input{
						flex: 1;
					}
					.btn{
						padding: 16rpx 20rpx;
						font-size: 24rpx;
						background-color: #ea504f;
						border-radius: 200rpx;
					}
				}
			}
			.c{
				.left{
					font-size: 28rpx;
					margin-bottom: 40rpx;
				}
				.idList{
					.idItem{
						padding: 16rpx 26rpx;
						border: 2rpx solid #fff;
						border-radius: 14rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						text{
							color: #999999;
							font-size: 24rpx;
						}
						.radio{
							display: flex;
							align-items: center;
							image{
								width: 34rpx;
								height: 34rpx;
							}
						}
					}
				}
			}
		}
		.btn{
			width: 100%;
			padding: 30rpx;
			text-align: center;
			color: #fff;
			background-color: #ea504f;
			border-radius: 10rpx;
		}
	}
</style>